<template>
    <div>
        <CommonDialog :title="curRow.id ? '编辑物品' : '新增物品'" :dialogShow.sync="dialogShow" @makeSure="handleMakeSure">
            <template #content>
                <el-form :model="itemInfo" label-width="80px" :rules="rules">
                    <el-form-item prop="name" label="物品名称">
                        <CommonInput v-model="itemInfo.name" :placeholder="'请输入物品名称'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="category" label="物品类别">
                        <CommonSelect :options="options" v-model="itemInfo.category" :placeholder="'请选择物品分类'">
                        </CommonSelect>
                    </el-form-item>
                    <el-form-item prop="unit" label="单位">
                        <CommonInput v-model="itemInfo.unit" :placeholder="'请输入物品单位'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="purchasePrice" label="进货价格">
                        <CommonInput v-model="itemInfo.purchasePrice" :placeholder="'请输入物品进货价格'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="quantity" label="库存数量">
                        <CommonInput v-model="itemInfo.quantity" :placeholder="'请输入库存数量'"></CommonInput>
                    </el-form-item>
                    <el-form-item prop="remarks" label="备注">
                        <CommonInput v-model="itemInfo.remarks" :placeholder="'请输入备注'" :type="'textarea'">
                        </CommonInput>
                    </el-form-item>
                </el-form>
            </template>
        </CommonDialog>
    </div>
</template>

<script>
import { uploadFile } from "@/api/foodManage"
export default {
    props: {
        curRow: {
            type: Object,
            default: () => { }
        },
        changeDialogShow: {
            type: Boolean,
            default: false
        },
        options: {
            type: Array,
            default() {
                return []
            }
        }
    },
    computed: {
        dialogShow: {
            get() {
                return this.changeDialogShow
            },
            set(v) {
                this.$emit('update:changeDialogShow', v)
            }
        }
    },
    created() {
        const keys = Object.keys(this.itemInfo)
        keys.forEach(key => {
            this.itemInfo[key] = this.curRow[key]
        })

    },
    data() {
        return {
            itemInfo: {
                name: '',
                category: '',
                purchasePrice: '',
                quantity: '',//库存数量
                remarks: '',//物品描述
                unit: ''
            },
            dialogImageUrl: '',
            dialogVisible: false,
            rules: {
                name: [
                    { required: true, message: '请输入物品名称', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                category: [
                    { required: true, message: '请选择物品分类', trigger: 'blur' },
                ],
                purchasePrice: [
                    { required: true, message: '请输入物品进货价格', trigger: 'blur' },
                ],
                remarks: [
                    { required: true, message: '请输入物品描述', trigger: 'blur' },
                ],
                status: [
                    { required: true, message: '请选择物品状态', trigger: 'blur' },
                ],
            }
        };
    },

    mounted() {

    },

    methods: {
        handleMakeSure() {
            if (this.curRow.id) {
                this.itemInfo.id = this.curRow.id
            }

            console.log(this.itemInfo, 'fff');
            const keys = Object.keys(this.itemInfo)
            keys.forEach(key => {
                if (!this.itemInfo[key]) {
                    this.itemInfo[key] = ''
                }
            })
            // return
            this.$emit('makeSure', this.itemInfo)
        },

    },
};
</script>